<template>
  <!-- modal -->
  <div class="modal" v-show="ModalBottom.isModal">
    <div class="modal-fiter"></div>
    <transition name="slide">
      <div class="modal-content" v-show="ModalBottom.isModal">
        <div class="modal-bottom">
          <div class="ModalBottom">
            <div class="null25"></div>
            <div class="header">
              <span class="spanOne" v-on:click="hide">取消</span>
              <span class="spanTwo" v-on:click="ModalBottomClick()">确定</span>
            </div>
            <div class="section">
              <div
                class="s-items"
                @click="pushClick(items)"
                v-for="(items,index) in ModalBottom.data"
                :key="index"
              >
                <div class="si-content">{{items[ModalBottom.key]}}</div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import mixin from "@/utils/mixin";
export default {
  name: "ModalBottom",
  props: ["ModalBottom"],
  mixins: [mixin],
  data() {
    return {
      show: {
        items: ""
      }
    };
  },
  mounted() {},
  methods: {
    hide: function() {
      this.ModalBottom.isModal = false;
      this.$emit("update:ModalBottom", this.ModalBottom);
    },
    pushClick(items) {
      this.show.items = items;
    },
    ModalBottomClick() {
      if (this.show.items.length < 0 || !this.show.items) {
        Toast("请确定选择！");
        return false;
      }
      this.$emit("ModalBottomClick", this.show.items);
      this.hide();
    }
  }
};
</script>
<style lang="scss" scoped>
.ModalBottom {
  background: #fff;
  .null25 {
    width: 100%;
    height: 25px;
  }
  .header {
    width: 100%;
    height: 48px;
    position: relative;
    margin-bottom: 36px;
    .spanOne {
      font-size: 34px;
      font-family: PingFangSC-Regular;
      font-weight: bold;
      color: rgba(129, 129, 129, 1);
      position: absolute;
      left: 32px;
      top: 0;
    }
    .spanTwo {
      font-size: 34px;
      font-family: PingFangSC-Regular;
      font-weight: bold;
      color: rgba(255, 37, 37, 1);
      position: absolute;
      right: 32px;
      top: 0;
    }
  }
  .section {
    padding: 23px;
    height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
    .s-items {
      float: left;
      width: 25%;
      text-align: center;
      .si-content {
        margin-left: 9px;
        margin-right: 9px;
        margin-bottom: 32px;
        height: 60px;
        line-height: 60px;
        background: rgba(237, 237, 237, 1);
        border-radius: 30px;
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 49, 51, 1);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .si-content:hover {
        background: rgba(255, 231, 231, 1);
        color: rgba(255, 37, 37, 1);
      }
    }
  }
}
.modal-fiter{
 transition: all 0.2s ease-in;
}
.modal-content{
-webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.slide-enter-active {
  animation-name: slideInUp;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}
.slide-leave-active {
  animation-name: slideOutDown;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}
@keyframes slideInUp {
  0% {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translateZ(0);
  }
}
@keyframes slideOutDown {
  0% {
    transform: translateZ(0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}
.delay-leave-active {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
</style>